<template>
	<yd-layout id='liveRoomDetail' class=''>
		<header class="header">

			<div class="header_l">
				<img class="header_l_img" :src="dataObj.title_img" alt="" />
				<div class="header_l_mengban_f">
					<div class="header_l_mengban">
						<div class="header_l_top">
							<img class="header_l_icon" src="../../assets/playGif.gif" alt="" />
							<span>正在直播</span>
						</div>
						<div class="header_l_btn" @click='playVideo'>去观看</div>
					</div>
				</div>
			</div>
		</header>
		<div class="content">
			<div class="live_title">
				<div class="c_size_34_48 ">{{dataObj.title}}</div>
				<div v-if="$route.query.kind==1" class="time">直播时间：{{dataObj.liveTime}}</div>
				<div v-else class="time">{{dataObj.member_total}}人观看</div>
			</div>
			<div class="live_teacher">
				<img class="live_teacher_img" :src="dataObj.avatar" alt="" />
				<div class="live_teacher_right">
					<div class="teacher_name c_size_30_42 c_text_ellipsis_1">{{dataObj.nick_name}}</div>
					<span>{{dataObj.summary||'暂无相关介绍'}}</span>
				</div>
			</div>
			<div class="live_detail">
				<div class="title c_size_34_48">直播介绍</div>
				<template v-if="dataObj.detail">
					<div class="c_v_html" v-html="dataObj.detail"></div>
				</template>
				<div v-else class="no_detail">
					暂无直播介绍
				</div>
			</div>
		</div>
		<div class="c_go_home c_size_30_42" @click="$router.push({name:'index',query:{str:'index'}})">去首页</div>
		<!--输入密码-->
		<PopPassword @postPassword='postPassword' :showPop.sync='showPop' :passwordNum.sync='passwordNum'></PopPassword>

	</yd-layout>
</template>

<script>
	import { CountDown } from 'vue-ydui/dist/lib.rem/countdown';
	import { Popup } from 'vue-ydui/dist/lib.rem/popup';
	import PopPassword from '../../components/PopPassword/PopPassword.vue'
	export default {
		components: {
			[CountDown.name]: CountDown,
			[Popup.name]: Popup,
			[PopPassword.name]: PopPassword,
		},
		data() {
			return {
				playBtn: true,
				palyOpen: false,
				h5VideoFlg: false,
				contentStyle: {},
				videoHeight: '',
				dataObj: {},
				mengBanImgStyle: {},
				mineObj: {},
				listObj: {},
				showPop: false,
				passwordNum: '',
				kindFlg2: false,
			}
		},
		created() {

		},
		//销毁实例
		beforeDestroy() {

			if(this.kindFlg2) {
				this.$root.submitEvent({
					kind: 2,
					lastFlg: true
				})
			}

		},
		watch: {

		},
		computed: {

		},
		async mounted() {
			await this.getMine();
			this.getTrailer()

			document.title = '正在直播'
		},
		methods: {

			getTrailer() {
				let name = 'live'
				this.$root.ajax({
					name: name,
					type: 'get',
					params: {
						id: this.$route.query.id
					}
				}).then((d) => {

					d.data.time = this.$root.getDate(new Date(d.data.start_time * 1000), {
						str: '/',
						allTime: true
					})

					d.data.liveTime = this.$root.getDate(new Date(d.data.start_time * 1000), {
						str: '-',
						allTime: true
					})
					if(this.$route.query.kind == 2) {
						d.data.newTitle = `【直播录像】${d.data.title}`
						this.mengBanImgStyle = {
							background: `url(${d.data.title_img}) no-repeat`,
							backgroundSize: `100% 100%`,
						}
					} else {
						d.data.newTitle = `【直播预告】${d.data.title}`
					}
					this.dataObj = Object.assign({}, this.dataObj, d.data)

					if(this.$root.isWeiXin()) {
						//分享
						let query = '';
						if(this.$root.config.channel) {
							query = `params=channelDY2FGoldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						} else {
							query = `params=oldUrlStrDY${this.$route.name}FGkeyNumDY1FGparamsKey1DYidFGparamsVal1DY${this.$route.query.id}`
						}
						this.$root.wxShare({
							d: {
								title: `【正在直播】${this.liveInfo.title}`,
								title_img: this.liveInfo.title_img
							}, //分享对象，题目等
							query: query, //参数
							desc: `分享嘉宾:${this.userInfo.nick_name}`
						})
					}
				})
			},
			//输入密码
			async postPassword() {
				if(this.passwordNum.length == 6) {
					let o = {
						room_id: this.listObj.id,
						password: this.passwordNum,
						name: 'liveRoom',
						passwordFlg: true,
					};
					var data = await this.$root.liveFlg(o);

				} else {
					this.$dialog.toast({
						mes: '请根据提示正确输入',
						timeout: 1500
					});
				}
			},
			playVideo() {
				this.$nextTick(() => {
					this.$root.liveFlg({
						room_id: this.$route.query.id,
						msgRouter: true,
					}).then((d) => {
						if(this.dataObj.is_req_pwd == 1 && this.dataObj.is_input_pwd != 1) {
							this.showPop = true;
							this.listObj = Object.assign({}, this.listObj, this.dataObj)
							this.passwordNum = ''
						} else {
							this.$router.push({
								name: 'liveRoom',
								query: {
									id: this.$route.query.id
								}
							})
						}
					})
				})

			},
			getMine() {
				return new Promise((resolve, reject) => {
					this.$root.ajax({
						name: 'my',
						params: {}
					}).then((d) => {
						this.mineObj = Object.assign({}, this.mineObj, d.data)
						resolve(d)
					})
				})

			},
		}
	}
</script>

<style lang="scss">
	@import './liveRoomDetail.scss';
</style>